<nav-bar-panel></nav-bar-panel>
<div class="content container">
    <div ng-if="currentPage==='shop'" style='margin-bottom:30px;'>
        <!--<a href="#/home" class="btn btn-default btn-xs">首页</a>-->
        <!--<ul class="nav nav-pills">-->
        <!--<li role="presentation" class="m-nav-item" style="width: 50px;">-->
        <!--<a href="#/category/{{shop.categoryId}}">-->
        <!--<span class="glyphicon glyphicon-chevron-left"></span>-->
        <!--</a>-->
        <!--</li>-->
        <!--<li class="m-nav-item" role="presentation" style="text-align: center;width: calc(100% - 90px)">-->
        <!--<a href="javascript: void(0)">{{shop.name}}店铺详情</a>-->
        <!--</li>-->
        <!--</ul>-->
        <div class="nav nav-pills div-nav">
            <div class="m-nav-item" style="width: 50px;text-align: center;
    margin-top: 7px;">
                <a href="#/category/{{shop.categoryId}}">
                    <span class="nav-back-icon"></span>
                    <!--<span style="font-size: 12px;">首页</span>-->
                </a>
            </div>
            <div class="m-nav-item m-nav-second-final-item" role="presentation">
                <a style="text-align: center; border: 0; color: #424242 !important;" class="border-nav-title">商户详情</a>
            </div>
        </div>
        <ul class="list-group">
            <li class="list-group-item">
                <img src="{{shop.logoUrl}}" alt="" style="width: 7em; height: 6em;display: inline-block;"
                     class=""/>
                <h4 class="limit-line inline-name"
                    style="display: inline-block;
    position: absolute;
    top: 4px;
    left: 122px;
    font-weight: bold;">{{shop.name}}</h4>
                <!--<rating ng-model="shop.rating" max="5" readonly="true" class="inline-rating"-->
                <!--style="display: inline-block; position: absolute; left: 110px; top: 46px; color: #ff2a2a;"></rating>-->
                <span class="inline-rating m-star" style="    margin-left: 6.5px;
    margin-top: -9px;"></span>
                <span class="limit-line inline-description"
                      ng-show="shop.discount>0"
                      style="display: inline-block;
    position: absolute;
    left: 65%;
    top: 38px;
    color: #ff8047;
    font-size: 14px;">{{shop.discount | discount}}</span>
                <span class="limit-line"
                      style="display: inline-block; position:absolute; left: 123px; bottom: 18px; color: #777777">{{shop.shopCommentCount}}条商户评价</span>
            </li>
            <li class="list-group-item">
                <span class="position-icon"></span>
                <span style="font-size: 15px;">{{shop.address}}</span>
            </li>
            <li class="list-group-item">
                <span class="shop-phone-icon"></span>
                <span style="font-size: 15px;">{{shop.contact}}</span>
            </li>
        </ul>
        <script type="text/javascript">
            function showShopDetails (argument) {
                if(document.getElementById('shopDetails').style.display == 'block'){
                    document.getElementById('shopDetails').style.display = 'none'; 
                    document.getElementById('shop-rightDown-icon').style.display = 'none';
                    document.getElementById('shop-right-icon').style.display = 'block';
                }
                else {
                    document.getElementById('shopDetails').style.display = 'block';
                    document.getElementById('shop-rightDown-icon').style.display = 'block';
                    document.getElementById('shop-right-icon').style.display = 'none';
                }
        }
        </script>
        <ul class="list-group" style="margin-top: -7px;">
            <list class="list-group-item">
                <span style="font-weight: bold; font-size: 17px;">店铺介绍:</span>
                <a onclick="showShopDetails()">
                    <span class="list-right-icon" id='shop-rightDown-icon' style="float: right;transform:rotate(90deg);-ms-transform:rotate(90deg);-moz-transform:rotate(90deg);
                    -webkit-transform:rotate(90deg);-o-transform:rotate(90deg);display: block;"></span>
                    <span class="list-right-icon" id='shop-right-icon' style="float: right;display: none;"></span>
                </a>
            </list>
            <list class="list-group-item" id='shopDetails' style='display: block;'>
                <div class="shop-des" style="font-size: 15px;max-width: 100%;" ng-bind-html="shop.description | to_trusted"></div>
            </list>
        </ul>
        <div style="text-align: center; background: #ddd; margin-top: -7px;">
            <div class="alert alert-default" role="alert" style="background: white; padding: 5px 15px;">
                <a ng-if="isCollected" ng-click="unCollect()" style="padding: 0 10px; display: inline-block;width: 32%">
                    <span class="uncollect-icon"></span>
                    <br/>
                    <span style="color: black;">取消收藏</span>
                    <!--<span class="glyphicon glyphicon-star">取消收藏</span>-->
                </a>
                <a ng-if="!isCollected" ng-click="collect()" style="padding: 0 10px; display: inline-block;width: 32%">
                    <!--<span class="glyphicon glyphicon-star-empty">收藏</span>-->
                    <span class="collect-icon"></span>
                    <br/>
                    <span style="color: black;">收藏</span>
                </a>
                <script type="text/javascript">
                    function addComments (argument) {
                        if(document.getElementById('showingShopComments').style.display == 'none')
                            document.getElementById('showingShopComments').style.display = 'block'; 
                        else document.getElementById('showingShopComments').style.display = 'none';
                }
                </script>
                <a onclick="addComments()" style="padding: 0 10px; display: inline-block;width: 32%">
                    <!--<span class="glyphicon glyphicon-edit">点评</span>-->
                    <span class="comment-icon"></span>
                    <br/>
                    <span style="color: black;">点评</span>
                </a>
                <a ng-click="showShopFeedbackPage()" style="padding: 0 10px; display: inline-block;width: 32%">
                    <!--<span class="glyphicon glyphicon-earphone"></span>投诉-->
                    <span class="tousu-icon"></span>
                    <br/>
                    <span style="color: black;">投诉</span>
                </a>
            </div>
        </div>
        <hr/>
        <div class="panel panel-default" style="display: none;">
            <div class="panel-heading">
                <h3 class="panel-title" style="text-align: center">商品菜单</h3>
            </div>
            <div class="panel-body">
                <div class="row products-preview-panel">
                    <!--<div ng-repeat="product in products" class="m3-item-panel">-->
                    <!--<a href="#/product/{{product.id}}">-->
                    <!--<img ng-src="{{product.logoUrl}}" alt="" style="width: 80px; height: 80px"/>-->
                    <!--<h4 class="limit-line">{{product.name}}</h4>-->
                    <!--&lt;!&ndash;<span>{{product.commentCount}}条评价</span>&ndash;&gt;-->
                    <!--<span class="limit-line" ng-bind-html="product.description | to_trusted"></span>-->
                    <!--<br/>-->
                    <!--<span class="product-price" style="  position: absolute; left: 1em; top: -1em;">￥{{product.price}}元</span>-->
                    <!--</a>-->
                    <!--</div>-->
                    <!--<div class="clearfix"></div>-->
                    <!--<hr/>-->
                    <ul class="list-group" style="  margin-left: -20px; margin-right: -20px">
                        <li class="list-group-item" ng-repeat="product in products"
                            style="padding: 0 !important;"
                            ng-click="showProductPage(product)">
                            <!--<span class="badge">{{product.commentCount}}条评论</span>-->

                            <div style="margin-bottom: -24px;">
                                <img ng-src="{{product.logoUrl}}" alt=""
                                     style="width: 80px; height: 80px; position: relative; margin: 5px; margin-top: -3px; margin-left: 0"
                                     class="thumbnail"/>
                                <span class="limit-line"
                                      style="font-size: 1.5em; position: absolute; left: 110px; top: 12px">{{product.name}}</span>
                                <rating ng-model="product.rating" max="5" readonly="true" class="inline-rating"
                                        style="display: inline-block; position: absolute; left: 110px; top: 35px; color: #ff2a2a;"></rating>

                                <span class="limit-line"
                                      style="position: absolute; top: 68px; right: 30px; max-width: 250px;"
                                      ng-bind-html="product.description | plain | to_trusted"></span>
                                <br/>
                                <span class="product-price" style="position: absolute; left: 110px; top: 59px;"
                                      ng-class="{'disabled': product.discount>0}">{{product.price}}元</span>
                                <span class="product-price" style="position: absolute; left: 166px; top: 59px;"
                                      ng-if="product.discount>0">{{product.promotionPrice}}元</span>
                            </div>
                        </li>
                    </ul>
                    <a ng-if="canLoadMoreProducts"
                       ng-click="loadMoreProducts()">
                        <span class="glyphicon glyphicon-sort-by-attributes"></span> 更多
                    </a>
                    <span ng-if="!canLoadMoreProducts">没有更多商品</span>
                </div>
            </div>
        </div>

        <!--<div class="list-group common-list-group">-->
        <!--<a href="#/product/{{product.id}}" class="list-group-item common-list-item" ng-repeat="product in products">-->
        <!--<span class="name">{{product.name}}</span>-->
        <!--<br/>-->
        <!--<img ng-src="{{product.logoUrl}}" style="width: 50px; height: 50px"/>-->
        <!--<span class="description">{{product.description}}</span>-->
        <!--</a>-->
        <!--</div>-->
        <!--<div class="m-pager">-->
        <!--<button class="glyphicon glyphicon-triangle-left"-->
        <!--ng-click="productsPage = productsPage - 1; loadProducts()">-->
        <!--</button>-->
        <!--<span>第{{productsPage}}/{{1 + parseInt((productsTotal - 1) / pageSize)}}页</span>-->
        <!--<button class="glyphicon glyphicon-triangle-right"-->
        <!--ng-click="productsPage = productsPage + 1; loadProducts()">-->
        <!--</button>-->
        <!--</div>-->
        <script type="text/javascript">
            function showComments (argument) {
                if(document.getElementById('comment-show').style.display == 'block'){
                    document.getElementById('comment-show').style.display = 'none'; 
                    document.getElementById('comment-rightDown-icon').style.display = 'none';
                    document.getElementById('comment-right-icon').style.display = 'block';
                }
                else {
                    document.getElementById('comment-show').style.display = 'block';
                    document.getElementById('comment-rightDown-icon').style.display = 'block';
                    document.getElementById('comment-right-icon').style.display = 'none';
                }
        }
        </script>
        <div>
            <!--<h2 style="text-align: center">评论</h2>-->
            <ul class="list-group" style="margin-top: -26px; margin-bottom: 13px;">
                <li class="list-group-item">
                    <span style="font-size: 18px; font-weight: bold;">评论({{shop.shopCommentCount}})</span>
                    <a onclick="showComments()">
                        <span class="list-right-icon" id='comment-rightDown-icon' style="float: right;transform:rotate(90deg);-ms-transform:rotate(90deg);-moz-transform:rotate(90deg);
                        -webkit-transform:rotate(90deg);-o-transform:rotate(90deg);display: block;"></span>
                        <span class="list-right-icon" id='comment-right-icon' style="float: right;display: none;"></span>
                    </a>
                </li>
            </ul>
            <div>
                <div class="panel panel-info" id="showingShopComments" style="display:none">
                    <div class="panel-heading shop-add-comment-heading">
                        <h3 class="panel-title">发表评论</h3>
                    </div>
                    <div class="panel-body">
                        <input class="form-control ng-pristine ng-untouched ng-valid" ng-model="newCommentTitle" placeholder="评论标题" type="text" style="display:none" value="123"></input>
                        <textarea rows="5" ng-model="newCommentContent" style="width: 100%"></textarea>
                        <br/>

                        <div style="text-align: center;">
                            <button class="btn btn-default"
                                    style="    width: 100%;
    color: white;
    background-color: #ff8047;
    font-size: 16px;"
                                    ng-click="addShopComment(newCommentTitle, newCommentContent);newCommentTitle=''; newCommentContent=''">
                                发布
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bs-callout bs-callout-danger comment-item-panel"
                 style="padding: 6px 20px; margin: 0 0;display: none"
                 ng-repeat="comment in comments">
                <span class="comment-author-field">{{comment.user.displayName}}:</span>
                <span>{{comment.title}}</span>
                <!--<span class="inline-rating m-star"></span>-->
                <!--<rating ng-model="comment.rating" max="5" readonly="true" class="inline-rating"-->
                <!--style="display: block; color: #ff2a2a"></rating>-->
                <span class="comment-date-field" style="top: 31px; right: 23px;">
                    {{comment.createTime | date: 'yyyy-MM-dd H:mm'}}</span>

                <p class="well well-sm comment-well" ng-if="comment.content.length<24 || comment.contentOpened">
                    {{comment.content}}
                    <a ng-click="comment.contentOpened=false" ng-if="comment.content.length>24">收回</a>
                </p>

                <p class="well well-sm comment-well" ng-if="comment.content.length>=24 && !comment.contentOpened">
                    {{comment.content.substr(0,24)}}...&nbsp;&nbsp;
                    <a ng-click="comment.contentOpened=true">查看更多</a>
                </p>
            </div>

            <div style="display: block;" id='comment-show'>
                <div class="comment-div " ng-repeat="comment in comments">
                    <div class="comment-pic" >
                        <img class="comment-img" src="{{comment.user.userlogo}}" />
                    </div>
                    <div class="comment-table">
                        <div class="comment-username">
                            <span >
                                {{comment.user.displayName.substr(0,2) + "**" + comment.user.displayName.substr(comment.user.displayName.length - 2, 2)}}
                            </span>
                            <span class="inline-rating m-star" style="position:absolute;top:4px;left:130px;display: none;"></span>
                            <span class="comment-datetime">
                                {{comment.createTime | date: 'yyyy-MM-dd H:mm'}}
                            </span>
                        </div>
                        <div>
                            <p class="comment-para" ng-if="comment.content.length<24 || comment.contentOpened">
                                {{comment.content}}
                                <a ng-click="comment.contentOpened=false" ng-if="comment.content.length>24">收回</a>
                            </p>

                            <p class="comment-para" ng-if="comment.content.length>=24 && !comment.contentOpened">
                                {{comment.content.substr(0,24)}}...&nbsp;&nbsp;
                                <a ng-click="comment.contentOpened=true">查看更多</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="top-bottom-ctrl-panel">
                <span class="ctrl-up" ng-click="goToTop()"></span>
                <!--<span class="glyphicon glyphicon-menu-down ctrl-down" ng-click="goToBottom()"></span>-->
            </div>
        </div>
    </div>
    <div ng-if="currentPage==='feedback'">
        <div class="nav nav-pills div-nav">
            <div class="m-nav-item" style="width: 50px;text-align: center;
                margin-top: 7px;">
                <a ng-click="showShopPage()">
                    <span class="nav-back-icon"></span>
                    <!--<span style="font-size: 12px;">首页</span>-->
                </a>
            </div>
            <div class="m-nav-item m-nav-second-final-item" role="presentation">
                <a style="text-align: center;" class="border-nav-title">商户投诉</a>
            </div>
        </div>

        <!--<button class="btn btn-default btn-sm" ng-click="showShopPage()">回到商户</button>-->
        <div class="form-padding">
            <form class="form-horizontal">
                <div class="form-group">
                    <label class="col-sm-2 control-label">姓名:</label>

                    <div class="col-sm-10">
                        <input type="text" ng-model="currentFeedback.name" class="form-control" placeholder="您的姓名">
                    </div>
                    </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">电话:</label>

                        <div class="col-sm-10">
                            <input type="text" ng-model="currentFeedback.phone" class="form-control"
                                   placeholder="您的电话或手机号">
                        </div>
                    </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">标题:</label>

                        <div class="col-sm-10">
                            <input type="text" ng-model="currentFeedback.title" class="form-control" placeholder="投诉标题">
                        </div>
                    </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">投诉内容:</label>

                        <div class="col-sm-10">
                            <textarea class="form-control" ng-model="currentFeedback.content" rows="3"
                                      placeholder="投诉内容"></textarea>
                        </div>
                    </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit"
                                ng-click="createFeedback(currentFeedback);currentFeedback={}"
                                class="btn btn-default" style="width: 100%">投诉
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<footer-bar-panel></footer-bar-panel>
